<template>
  <div>
    <div>
      <el-table v-loading="listLoading" :data="signList" row-key="id" fit highlight-current-row
                :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" class="c-width100 color-222 family-PingFangSC-Regular font-s12">
        <el-table-column  align="center" label="昵称">
          <template slot-scope="scope">
            <div class="clearfix">
              <div class="fl margin-r10 img"><img :src="scope.row.headimgurl|| defultImg" @error="setDefultImg" alt=""></div>
              <div class="text-alignL">
                <div class="font-s14 line-limit-length-200" :title="scope.row.nickname">{{scope.row.nickname}}</div>
                <div class="color-999">(ID:{{scope.row.userId}})</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="140" align="center" label="票号">
          <template slot-scope="scope">
            <span>{{scope.row.ticketNo}}</span>
          </template>
        </el-table-column>
        <el-table-column width="210" align="center" label="资料">
          <template slot-scope="scope">
            <div class="line-limit-length-180" :title="scope.row.name">{{scope.row.name}}</div>
            <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>

        <el-table-column width="100" align="center" label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.signed}}</span>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center" label="签到时间">
          <template slot-scope="scope">
            <span>{{scope.row.signUpTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="90" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.signed=='未签到'&&permission==3">
              <b @click="signed(scope.row.id, scope.row.userId)">签到</b>
            </div>
            <div v-if="scope.row.signed=='已签到'&&permission==3">
              <b @click="cancelSigned(scope.row.id, scope.row.userId)">取消签到</b>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="block text-c">
        <!--分页组件 current-page:当前页   -->
        <!--   page-sizes:每页几条数据（选项）   -->
        <!--   page-size:每页几条数据   -->
        <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryParam.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { addOrEditActivitiesEnroll } from '@/api/activities'
  import defultImg from '@/assets/default_head.png'
  export default {
    props: ['queryParam', 'signData', 'permission'],
    data() {
      return {
        defultImg,
        inputParam: {
          id: -1,
          activityId: -1,
          userId: -1,
          actTicketId: -1,
          orderId: -1,
          name: '',
          opType: 3,
          mobile: '',
          fieldVal1: '',
          fieldVal2: '',
          fieldVal3: '',
          fieldVal4: '',
          fieldVal5: '',
          enrollTime: '',
          signUpTime: '',
          issuccess: -1
        },
        signList: [],
        listLoading: false
      }
    },
    watch: {
      signData() {
        this.signList = this.signData
      }
    },
    methods: {
      setDefultImg(e) {
        e.target.src = defultImg
      },
      handleSizeChange(val) {
        this.queryParam.pageSize = val
        this.$emit('refreshSign')
      },
      handleCurrentChange(val) {
        this.queryParam.currentPage = val
        this.queryParam.pageIndex = (val - 1) * this.queryParam.pageSize
        this.$emit('refreshSign')
      },
      signed(id, userId) {
        // 点击签到
        this.inputParam.id = id
        this.inputParam.userId = userId
        this.inputParam.opType = 3
        this.listLoading = true
        addOrEditActivitiesEnroll(this.inputParam).then(res => {
          this.listLoading = false
          if (res.data.data.retError == 0) {
            this.$message({
              type: 'success',
              message: '签到成功!'
            })
          } else {
            this.$message({
              type: 'warn',
              message: '签到失败!'
            })
          }
          this.$emit('refreshSign')
        }).catch(err => {
          this.listLoading = false
          console.log(err)
        })
      },
      cancelSigned(id, userId) {
        // 取消签到
        this.inputParam.id = id
        this.inputParam.userId = userId
        this.inputParam.opType = 4
        this.listLoading = true
        addOrEditActivitiesEnroll(this.inputParam).then(res => {
        	this.listLoading = false
          if (res.data.data.retError == 0) {
            this.$message({
              type: 'success',
              message: '取消签到成功!'
            })
          } else {
            this.$message({
              type: 'warn',
              message: '取消签到失败!'
            })
          }
          this.$emit('refreshSign')
        }).catch(err => {
        	this.listLoading = false
          console.log(err)
        })
      }
    },
    mounted() {
      this.signList = this.signData
    }
  }
</script>

<style scoped>
</style>
